<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>当当网</title>
    <link rel="stylesheet" href="css.css">
</head>
 
<!-- <style>

ul{

list-style: none;

}
li{
   display: inline; 
   text-align: center;
}

.headleft{
    width: 110px;
    margin-left: 475px;
    float: left;
    /* border: 2px solid; */
}

.headright{
    width: 300px;
    height: 30px;
    text-align: center;
    background-color:rgb(7, 172, 95);
    /* float: right;  */
    /* margin-right: 470px; */
    margin-left:1120px;
    /* margin-left:300px; */
   
}

/* .a{
    width: 1000px;
    height: 50px;
    border: 2px solid red;
} */
.daohang{
    margin-left: 465px;
    /* align-self: center; */
    width: 960px;
    clear:both;
    text-align: center;
    background:url("img/menuBg.jpg");
    -webkit-mask-repeat-x:1
}

.tushubang,.foot{
    margin-left:460px;
    
    /* text-align: center; */
}
  
.neirong{
    margin-left:460px;
    width: 960px;
    height: 460px;
    border:5px solid green;
    position: relative;
}
.zuoshang{
   /*padding-left:10px;*/
   width: 300px;
   position: relative;
   left:-20px;
   top: 20px;
                     /* border:2px solid #0000FF  */
}
.zuoxia{
    width: 300px;
    position: relative;
    left: 0px;
    top:50px;
    /* right: 200px; */
             /* border:2px solid #0000FF  */
}
.zhong{
    float: right;
    /* clear: both; */
    /* align:left; */
    position: relative;
    margin-top: -250px;
    margin-right: 370px;
    width: 300px;
}

.youshang{
    float: right;
    clear: both;
    position: relative;
    margin-top: -300px;
    margin-right: 220px;
            /* border:2px solid #0000FF  */
}
.youxia{
    float: right;
    clear: both;
    position: relative;
    margin-top: -320px;
    margin-right: 250px;
             /* border:2px solid #0000FF  */
}
.one{
    position: relative;
    width: 45px;
   
}
.two{
    position: relative;
    margin-right: 100px;
    /* margin-top: 100px; */
    width: 45px;
    z-index: 5;
}
.three{
    position: relative;
    margin-right: 40px;
    z-index: 5;
}
.book-02,.book-03{
    position: relative;
    margin-top: -20px;
    width: 104px;
    z-index: 3;
}
.youyoushang{
    float: right;
    clear: both;
    position: relative;
    width: 220px;
    top:-320px;
    right: 20px;
            /* border:2px solid #0000FF  */
}
.youyouxia{
    float: right;
    clear: both;
    position: relative;
    width: 220px;
    top:-310px;
    right: 20px;
            /* border:2px solid #0000FF  */
}
.foot{
    width: 1000px;
    height: 50px;
            /* border: 2px solid red */
     
}
.foot1,.foot2,.foot3{
     
    float: right;
    /* top: -500px; */
}
.foot1{
    margin-top:-120px; 
    margin-right:-210px;

}
.foot2{
    margin-top:-120px; 
    margin-right: 240px;
}
.foot3{
    margin-top:-120px; 
    margin-right: 285px;
} -->
<!-- /* .foot2{
     
     float: right;
 }
 .foot3{
     
     float: right;
 } */ -->

<!-- </style> -->
<body>
        <div class="head">

        <div class="headleft">
        <img src="./img/logo.jpg" title="logo" >
        </div>


        <div class="headright">
        <ul>
            <li>尾品汇</li>
            <li>当当优选</li>
            <li>数字馆</li>
            <li>都看阅器</li>
        </ul>
        </div>

    </div>
    
    <div class="daohang">
        <ul>
        <a href="">首页</a>
        <a href="">图书</a>
        <a href="">音像</a>
        <a href="">童装</a>
        <a href="">服装</a>
        <a href="">鞋靴</a>
        <a href="">运动</a>
        <a href="">箱包</a>
        <a href="">美妆</a>
        <a href="">珠宝</a>
        <a href="">首页</a>
        <a href="">家具</a>
        <a href="">食品</a>
        <a href="">酒类</a>
        <a href="">手机</a>
        <a href="">数码</a>
        <a href="">电脑</a>
        <a href="">家电</a>
        
        </ul>

    </div>
    
    <div class="tushubang">
    <img src="./img/banner.png">


    </div>




    <div class="neirong">
        <!-- <div class="one"> 
            <img src="img/bookNo1.gif">
        </div> -->
        <div class="zuoshang">
            <img src="img/bg_bang.gif">
        </div>

        <div class="zuoxia">
            <img src="img/book-01.jpg">
        </div>
        

        <div class="zhong">

            <h3>偷影子的人</h3>
            <p>作者：[法]马克·李维(Marc Levy)著</p> 
            <p>出版社：湖南文艺出版社</p> 
            <p>当当价：￥17.90</p> 
            <p>不知道姓氏的克蕾儿，这就是你在我声明中的角色，
                我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，
                一个时间之神没有应允的愿望。一个老受班上同学欺负的小男孩，
                因为拥有一种特殊力量而强大：他能偷“别人的影子”。</p>
        </div>


        <div class="youshang">
            <div class="two"> <img src="img/bookNo2.gif"></div>
           
            <div class="book-02"><img src="img/book-02.jpg"></div>
        </div>
        
        <div class="youyoushang">
             <p>看见(样式知名记者、  主持人柴静：十年个人成长的告白，中国社会变迁的备忘)</p>
             <p>作者：柴静 著</p>
             <p>出版社：广西师范大学出版社</p>
             <p>￥17.90 &nbsp;&nbsp;&nbsp;&nbsp; 7.4折</p>  

        </div>


        <div class="youxia">
                <div class="three"> <img src="img/bookNo3.gif"></div>
           
                <div class="book-03"><img src="img/book-03.jpg"></div>
        </div>
        <div class="youyouxia">
                <p>改变孩子先改变自己</p>
                <p>作者：贾容韬 贾毅 著</p>
                <p>出版:作家出版社</p>
                <p>￥22.20 &nbsp;&nbsp;&nbsp;&nbsp; 7.4折</p>  
        </div>

    </div>  <!-- 内容正文结束标签-->
    <!-- 
        京ICP证 041189号出版物经营许可证 新出发京批字第直0673号
        Copyright(C)当当网2004—2017，All Rights Reserved
    -->

    <div class="foot">

        <div class="foot1"><p>京ICP证 041189号出版物经营许可证 新出发京批字第直0673号</p></div>
        <div class="foot2"><img src="img/validate.gif"></div>
        <div class="foot3"><p> Copyright(C)当当网2004—2017，All Rights Reserved</p></div>
    </div>
        
   
        
</body>
</html>

